<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录下拉框</title>
    <style>
      body {
        margin: 0;
      }

      div.login-btn-mod {
        width: 28px;
        height: 45px;
        padding-right: 22px;
        margin: 19px 0 0 500px;
        float: left;
      }

      div.login-btn-box a {
        display: none;
      }

      img.avatar {
        width: 30px;
        height: 30px;
        border-radius: 100%;
      }

      a.login-btn {
        display: block;
        width: 28px;
        height: 16px;
        margin-top: 7px;
        text-decoration: none;
        color: rgb(120, 120, 120);
        font-size: 12px;
      }

      div.drop-down {
        display: none;
        margin: 3px 0 0 -60px;
      }

      div.drop-down ul {
        width: 158px;
        height: 240px;
        border: 1px solid rgb(32, 32, 32);
        list-style: none;
        padding-left: 0;
        margin: 0;
        background-color: rgb(43, 43, 43);
        box-shadow: 0 8px 24px 0 rgba(0,0,0,0.50);
      }

      div.drop-down li {
        width: 158px;
        height: 34px;
      }

      div.drop-down li a {
        display: block;
        width: 134px;
        height: 34px;
        padding-left: 24px;
        text-decoration: none;
      }
      div.drop-down li a:hover {
        background-color: rgb(53, 53, 53);
      }

      div.drop-down li a i {
        display: block;
        float: left;
        width: 18px;
        height: 18px;
        margin: 7px 10px 0 0;
        background-image: url(https://s2.music.126.net/style/web2/img/frame/toplist.png?1a01fca269a23929a4153d6ee8d628aa);
      }
      i.home-logo {
        background-position: 0 -80px;
      }
      i.noti-logo {
        background-position: -20px -120px;
      }
      i.level-logo {
        background-position: 0 -100px;
      }
      i.vip-logo {
        background-position: 0 -221px;
      }

      i.preference-logo {
        background-position: 0 -140px;
      }
      i.kyc-logo {
        background-position: -20px -142px;
      }

      i.log-out-logo {
        background-position: 0 -200px;
      }

      div.drop-down li a em {
        display: inline-block;
        height: 34px;
        line-height: 34px;
        color: rgb(204, 204, 204);
        font-style: normal;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
      }



      div.red {
        width: 100%;
        height: 300px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="login-btn-mod">
      <div class="login-btn-box">
        <img
          class="avatar"
          src="https://p3.music.126.net/SUeqMM8HOIpHv9Nhl9qt9w==/109951165647004069.jpg"
          alt=""
        />
        <a href="" class="login-btn">登录</a>
      </div>
      <div class="drop-down">
        <ul>
          <li>
            <a href=""><i class="home-logo"></i><em>我的主页</em></a>
          </li>
          <li>
            <a href=""><i class="noti-logo"></i><em>我的消息</em></a>
          </li>
          <li>
            <a href=""><i class="level-logo"></i><em>我的等级</em></a>
          </li>
          <li>
            <a href=""><i class="vip-logo"></i><em>VIP会员</em></a>
          </li>
          <li>
            <a href=""><i class="preference-logo"></i><em>个人设置</em></a>
          </li>
          <li>
            <a href=""><i class="kyc-logo"></i><em>实名认证</em></a>
          </li>
          <li>
            <a href=""><i class="log-out-logo"></i><em>退出</em></a>
          </li>
        </ul>
      </div>
    </div>

    <div class="red">

    </div>

    <script>
      let loginBtnBox = document.querySelector("div.login-btn-mod");
      let dropDown = document.querySelector("div.drop-down");
      loginBtnBox.addEventListener("mouseenter", function () {
        dropDown.style.display = "block";
      });
      loginBtnBox.addEventListener("mouseleave", function () {
        dropDown.style.display = "none";
      });
    </script>
  </body>
</html>
